import { Col, Image } from 'antd'
import { CommentOutlined, EyeOutlined } from "@ant-design/icons"
import styles from "./index.module.scss"
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { getdiscuss } from "@/apis/discuss"
import { useEffect, useState } from 'react'
const base_url = import.meta.env.VITE_APP_URL
type Item = {
    Cover_img: string,
    review: number,
    texttual: string
    title: string
    _id: string
}
const FoodItem = ({ keyIndex, item }: { keyIndex: number, item: Item }) => {
    const navigate = useNavigate()
    const thems = useSelector((state: any) => state.Appstore.theme)
    const [discusslength, setdiscusslength] = useState(0)
    const toDetail = (id: String) => {
        navigate(`/detaile/${id}`)
    }
    useEffect(() => {
        getdiscuss(item._id).then(res => {
            setdiscusslength(res.data.length)
        })
    })
    return (
        <>
            {

                keyIndex % 2 == 0 ?

                    <Col flex={"auto"} style={{ margin: "5px", }} xs={22} sm={20} md={11} lg={7} >
                        <div style={{ width: "100%", height: "100%", display: "flex", justifyContent: "space-between" }}>
                            <Image
                                preview={{
                                    mask:
                                        <div>点击预览</div>
                                }}
                                width={"50%"}
                                height={'150px'}
                                src={base_url + item.Cover_img}
                            />
                            <div onClick={() => toDetail(item._id)} style={{ background: thems ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.5)', width: '50%', padding: "10px", display: "flex", flexDirection: 'column', justifyContent: "space-evenly" }}>
                                <p style={{ textAlign: "center" }}>{item.title}</p>
                                <p className={styles.overline} style={{ margin: "5px 0", lineHeight: "15px", fontSize: "10px" }}>{item.texttual}</p>
                                <div style={{ display: "flex", justifyContent: "space-around", alignItems: "center" }}>
                                    <div> <EyeOutlined />
                                        {item.review}</div>
                                    <div> <CommentOutlined />
                                        {discusslength}</div>
                                </div>
                            </div>

                        </div>
                    </Col>


                    : <Col flex={"auto"} style={{ margin: "5px", }} xs={22} sm={20} md={11} lg={7} >
                        <div style={{ width: "100%", height: "100%", display: "flex", justifyContent: "space-between" }}>
                            <div onClick={() => toDetail(item._id)} style={{ background: thems ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.5)', width: '50%', padding: "10px", display: "flex", flexDirection: 'column', justifyContent: "space-evenly" }}>
                                <p style={{ textAlign: "center" }}>{item.title}</p>
                                <p className={styles.overline} style={{ margin: "5px 0", lineHeight: "15px", fontSize: "10px" }}>{item.texttual}</p>
                                <div style={{ display: "flex", justifyContent: "space-around", alignItems: "center" }}>
                                    <div> <EyeOutlined />
                                        {item.review}</div>
                                    <div> <CommentOutlined />
                                        {discusslength}</div>
                                </div>
                            </div>
                            <Image
                                preview={{
                                    mask:
                                        <div>点击预览</div>
                                }}
                                width={"50%"}
                                height={"150px"}
                                src={base_url + item.Cover_img}
                            />

                        </div>
                    </Col>
            }
        </>
    )
}

export default FoodItem